//@ts-nocheck
import React from 'react';
import dva, {connect} from './dva';

// 查看 05dva/dva/history/00.basic
const app = dva();

//定义一个模型, 就是一个redux模块
app.model({
  namespace: 'counter1',
  state/*←定义的reducer里的state*/: {number: 0},
  reducers: {
    //处理器对象的key再加上上面写的命名空间(namespace), 就是组件里你对应需要派发的动作名 (props.dispatch({type: 'counter/add'})
    add(state) {
      return {number: state.number + 1}
    }
  }
})
app.model({
  namespace: 'counter2',
  state: {number: 0},
  reducers: {
    //处理器对象的key再加上上面写的命名空间(namespace), 就是组件里你对应需要派发的动作名 (props.dispatch({type: 'counter/add'})
    add(state) {
      return {number: state.number + 1}
    }
  }
})

function Counter(props) {
  return (
    <div>
      <p>{props.number}</p>
      <button onClick={()=>props.dispatch({type: 'counter1/add'})}>+</button>
    </div>
  )
}

const ConnectedCounter1 = connect(
  state => state.counter1 /*←就是你上面model1,namespace指定的名字*/
)(Counter);


function Counter2(props) {
  return (
    <div>
      <p>{props.number}</p>
      <button onClick={()=>props.dispatch({type: 'counter2/add'})}>+</button>
    </div>
  )
}

const ConnectedCounter2 = connect(
  state => state.counter2
)(Counter2);

//定义路由: 最终要渲染什么?
app.router(()=><><ConnectedCounter1/><ConnectedCounter2/></>)

//开始渲染, 把app.router方法的返回值渲染到#root容器里
app.start('#root');
